<template>
  <div class="III-III-I">
    <table class="III-III-I__table">
      <tr class="III-III-I__table-trone">
        <td class="III-III-I__table-trone-td"
            colspan="10">
          <div class="III-III-I__table-trone-td-title">
            III-3 科研项目情况
          </div>
        </td>
      </tr>
      <tr class="III-III-I__table-trtwo">
        <td class="III-III-I__table-trtwo-td"
            colspan="10">
          <div class="III-III-I__table-trtwo-td-title">
            III-3-1 国家级科研项目
          </div>
        </td>
      </tr>
      <tr class="III-III-I__table-th">
        <td class="III-III-I__table-th-tdone">
          序号
        </td>
        <td class="III-III-I__table-th-tdtwo">
          项目来源
        </td>
        <td class="III-III-I__table-th-tdthree">
          项目类型
        </td>
        <td class="III-III-I__table-th-tdfour">
          项目（课题）名称
        </td>
        <td class="III-III-I__table-th-tdfive">
          项目编号
        </td>
        <td class="III-III-I__table-th-tdsix">
          负责人
        </td>
        <td class="III-III-I__table-th-tdseven">
          立项<br>时间
        </td>
        <td class="III-III-I__table-th-tdeight">
          起讫<br>时间
        </td>
        <td class="III-III-I__table-th-tdnine">
          合同<br>经费<br>（万元）
        </td>
        <td class="III-III-I__table-th-tdten">
          到账<br>经费<br>（万元）
        </td>
        <el-button type="success"
                   size="small"
                   icon="el-icon-plus"
                   class="III-III-I__table-th-add-button"
                   circle
                   @click.prevent="addList"/>
      </tr>
      <tr v-for="(item, index) in ccas"
          :key="index"
          class="III-III-I__table-tr">
        <td class="III-III-I__table-tr-tdone">
          {{ index + 1 }}
        </td>
        <td class="III-III-I__table-tr-tdtwo">
          <el-select v-model="item.projectSource"
                     class="III-III-I__table-tr-tdtwo-select"
                     placeholder="请选择">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"/>
          </el-select>
        </td>
        <td class="III-III-I__table-tr-tdthree">
          <el-input
            v-model="item.projectType"
            class="III-III-I__table-tr-tdthree-input"
            type="textarea"
            autosize
            placeholder="XXXX"
            :maxlength="30"/>
        </td>
        <td class="III-III-I__table-tr-tdfour">
          <el-input
            v-model="item.entryName"
            class="III-III-I__table-tr-tdfour-input"
            type="textarea"
            autosize
            placeholder="XXXX"
            :maxlength="50"/>
        </td>
        <td class="III-III-I__table-tr-tdfive">
          <el-input
            v-model="item.itemNo"
            class="III-III-I__table-tr-tdfive-input"
            type="textarea"
            placeholder="XXXXXX"
            autosize
            :maxlength="30"/>
        </td>
        <td class="III-III-I__table-tr-tdsix">
          <el-input
            v-model="item.projecter"
            class="III-III-I__table-tr-tdsix-input"
            type="textarea"
            placeholder="张三"
            autosize
            :maxlength="20"/>
        </td>
        <td class="III-III-I__table-tr-tdseven">
          <el-input
            v-model="item.establishTime"
            class="III-III-I__table-tr-tdseven-input"
            type="input"
            placeholder="201906"
            :maxlength="6"/>
        </td>
        <td class="III-III-I__table-tr-tdeight">
          <el-input
            v-model="item.startEndTime"
            class="III-III-I__table-tr-tdeight-input"
            type="textarea"
            placeholder="202001-202312"
            autosize
            :maxlength="13"/>
        </td>
        <td class="III-III-I__table-tr-tdnine">
          <el-input
            v-model="item.contractFund"
            class="III-III-I__table-tr-tdnine-input"
            type="textarea"
            autosize
            placeholder="100"
            oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}"/>
        </td>
        <td class="III-III-I__table-tr-tdten">
          <el-input
            v-model="item.receivedFund"
            class="III-III-I__table-tr-tdten-input"
            type="textarea"
            autosize
            placeholder="100"
            oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}"/>
        </td>
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   class="III-III-I__table-tr-delete-button"
                   circle
                   @click.prevent="deleteItem(index)"/>
      </tr>
    </table>
    <div class="III-III-I__explain">
      <span class="III-III-I__explain-strong">
        说明：①
      </span>
      本表限填评估期内本单位牵头立项的“国家自然科学基金、国家科技重大专项（含军口）、国家重点研发计划、国家社会科学基金（不含教育学项目）”。
      <span class="III-III-I__explain-strong">
        ②
      </span>
      对于国家科技重大专项、国家重点研发计划、国家自然科学基金重大项目，项目（课题）牵头单位和子项目（课题）牵头单位均可填写（项目总负责人请在“课题名称”后注明）；其他项目仅限项目（课题）牵头单位填写，子项目（课题）牵头单位不填写。
      <span class="III-III-I__explain-strong">
        ③
      </span>
      到账经费”填写评估期内实际获得并计入财务账目的经费，不含配套经费，下同。
    </div>
  </div>
</template>

<script>
import { getPageData } from '@/utils/getData.js'

export default {
  watch: {
    ccas: {
      handler (newVal) {
        sessionStorage['this_data'] = JSON.stringify(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  async mounted () {
    const loading = this.$loading({ lock: true, text: '数据获取中...请稍后！', background: 'rgba(0, 0, 0, 0.7)' })
    this.ccas = await getPageData('ccas')
    loading.close()
  },
  data () {
    return {
      options: [
        { value: '0', label: '国家自然科学基金' },
        { value: '1', label: '国家科技重大专项' },
        { value: '2', label: '国家重点研发计划' },
        { value: '3', label: '国家社会科学基金' }],
      ccas: [
        { projectSource: '', projectType: '', entryName: '', itemNo: '', projecter: '', establishTime: '', startEndTime: '', contractFund: '', receivedFund: '' }
      ]
    }
  },
  methods: {
    addList () {
      this.ccas.push({ projectSource: '', projectType: '', entryName: '', itemNo: '', projecter: '', establishTime: '', startEndTime: '', contractFund: '', receivedFund: '' })
    },
    deleteItem (index) {
      if (this.ccas.length > 1) {
        this.ccas.splice(index, 1)
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/page/3-3-1.less';
</style>
